<form
    data-amplify-form
    data-amplify-authenticator-select-mfa-type
    (submit)="onSubmit($event)"
    (input)="onInput($event)"
>
    <fieldset
        [class]="classNames(ComponentClassName.Flex, 'amplify-authenticator__column')"
        data-amplify-fieldset
        [disabled]="authenticator.isPending"
    >
        <amplify-slot
            name="select-mfa-type-header"
            [context]="context"
        >
            <h3 [class]="classNames(ComponentClassName.Heading, 'amplify-heading--3')">{{ headerText }}</h3>
        </amplify-slot>
        <div
            *ngFor="let mfaType of allowedMfaTypes; index as i"
            [class]="classNames(ComponentClassName.Flex, ComponentClassName.Field, ComponentClassName.RadioGroupField)"
            role="radiogroup"
        >
            <label
                [class]="classNames(ComponentClassName.Flex, ComponentClassName.Radio)"
                [attr.data-amplify-radio-control-label]
            >
                <span [class]="classNames(ComponentClassName.Text, ComponentClassName.RadioLabel)">
                    {{getMfaTypeLabelByValue(mfaType)}}
                </span>
                <input
                    [class]="classNames(ComponentClassName.Input, ComponentClassName.FieldGroupControl, ComponentClassName.VisuallyHidden, ComponentClassName.RadioInput)"
                    [attr.data-amplify-radio-control-input]
                    [value]="mfaType"
                    [checked]="i === 0"
                    name="mfa_type"
                    type="radio"
                    required
                />
                <span
                    [class]="classNames(ComponentClassName.Flex, ComponentClassName.RadioButton)"
                    [attr.aria-hidden]="true"
                ></span>
            </label>
        </div>
        <button
            amplify-button
            variation="primary"
            fullWidth="true"
            type="submit"
            [isDisabled]="authenticator.isPending"
        >
            {{ confirmText }}
        </button>
        <button
            amplify-button
            size="small"
            variation="link"
            fontWeight="normal"
            fullWidth="true"
            (click)="authenticator.toSignIn()"
        >
            {{ backToSignInText }}
        </button>
        <amplify-error *ngIf="authenticator.error">
            {{ authenticator.error }}
        </amplify-error>
    </fieldset>
    <amplify-slot
        name="select-mfa-type-footer"
        [context]="context"
    ></amplify-slot>
</form>